<template>
    <div>
        <!-- 基础信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">基础信息</h3>
                <div class="info-row">
                    <div class="info-item">订单状态：<span>{{ orderStatusText }}</span></div>
                    <div class="info-item">始发地：<span>{{ this.basicDetail.dpaProvince }}/{{ this.basicDetail.dpaCity
                            }}</span></div>
                    <div class="info-item">订单来源：<span>{{ orderSourceText }}</span></div>
                    <div class="info-item">创建时间：<span>{{ this.basicDetail.orderCreatedTime }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">订单号：<span>{{ this.basicDetail.id }}</span></div>
                    <div class="info-item">目的地：<span>{{ this.basicDetail.cdaProvince }}/{{
                            this.basicDetail.cdaCity}}</span></div>
                    <div class="info-item">合同：<span>{{ contractText }}</span></div>
                    <div class="info-item">客(用)户名称：<span>{{ this.basicDetail.name }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">下单时间：<span>{{ this.basicDetail.orderCreatedTime }}</span></div>
                    <div class="info-item">货物类型：<span>{{ goodsTypeText }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
                <div class="info-row">

                    <div class="info-item">最后更新时间：<span>{{ this.basicDetail.updateTime }}</span></div>
                    <div class="info-item">最后更新人：<span>{{ this.basicDetail.realName }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>

        <!-- 发货信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #dc780e;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">发货信息</h3>
                <div class="info-row">
                    <div class="info-item" style="white-space: nowrap;">发货地址：<span>{{ this.sendDetail.faHuoAddress
                            }}</span></div>
                    <div class="info-item">计划发货时间：<span>{{ this.sendDetail.expectedShipmentTime }}</span></div>
                </div>
            </div>
        </el-card>

        <!-- 收货信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #13d941;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">收货信息</h3>
                <div class="info-row">
                    <div class="info-item">联系人姓名：<span>{{ this.deliveryDetail.companyContact }}</span></div>
                    <div class="info-item">联系电话：<span>{{ this.deliveryDetail.contactInfo }}</span></div>

                </div>
                <div class="info-row">
                    <div class="info-item" style="white-space: nowrap;">收货地址：<span>{{
                        this.deliveryDetail.customerAddress }}</span></div>
                    <div class="info-item">计划收货时间：<span>{{ this.deliveryDetail.expectedDeliveryTime }}</span></div>
                </div>
            </div>
        </el-card>

        <!-- 货物信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">货物信息</h3>
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="goodsName" label="货物名称"></el-table-column>
                    <el-table-column prop="goodsSmallCount" label="数量"></el-table-column>
                    <el-table-column prop="goodsVolume" label="体积 (m³)"></el-table-column>
                    <el-table-column prop="goodsWeight" label="重量 (kg)"></el-table-column>
                </el-table>
                <div class="total-info">
                    合计：
                    <div>总数量：<span>{{ totalGoodsCount }}</span>箱</div>
                    <div>总体积：<span>{{ totalGoodsVolume }}</span>m³</div>
                    <div>总质量：<span>{{ totalGoodsWeight }}</span>kg</div>
                </div>
            </div>
        </el-card>


        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">费用信息</h3>
                <div class="info-row">
                    <div class="info-item">计费方式：<span>{{ billingMethodText }}</span></div>
                    <div class="info-item">运输费：<span>{{ this.costDetail.transportationFee }}</span></div>
                    <div class="info-item">保险费：<span>{{ this.costDetail.insuranceFee }}</span></div>
                    <div class="info-item">包装费：<span>{{ this.costDetail.packagingFee }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">装卸费：<span>{{ this.costDetail.loadingFee }}</span></div>
                    <div class="info-item">中转费：<span>{{ this.costDetail.transferFee }}</span></div>
                    <div class="info-item">服务费：<span>{{ this.costDetail.serviceFee }}</span></div>
                    <div class="info-item">其他费用：<span>{{ this.costDetail.otherFees }}</span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">付款方式:<span>{{ paymentMethodText }}</span></div>
                    <div class="info-item" style="color: red;">费用合计：<span>{{ this.costDetail.totalFee }}</span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>

        

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">订单备注</h3>
                <div class="info-row">
                    <div class="info-item"><span>{{ this.basicDetail.remarks }}</span></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderId: '',
            tableData: [],
            basicDetail: {},//基本信息对象
            sendDetail: {},//发货信息对象
            deliveryDetail: {},//收货信息对象
            goodsDetail: {},//货物信息对象
            costDetail:{},//费用信息对象
        }
    },

    methods: {
        queryBasicDetail() {//查询基础信息
            this.$axios.get("/api/order/queryBasicDetail/" + this.orderId)
                .then(resp => {
                    console.log(resp.data)
                    this.basicDetail = resp.data.data
                })
        },
        querySendDetail() {
            this.$axios.get("/api/order/querySendDetail/" + this.orderId)
                .then(resp => {
                    console.log(resp.data)
                    this.sendDetail = resp.data.data
                })
        },
        queryDeliveryDetail() {
            this.$axios.get("/api/order/queryDeliveryDetail/" + this.orderId)
                .then(resp => {
                    console.log(resp.data)
                    this.deliveryDetail = resp.data.data
                })
        },
        queryGoodsDetail() {
            this.$axios.get("/api/order/queryGoodsDetail/" + this.orderId)
                .then(resp => {
                    console.log(resp.data)
                    this.tableData = resp.data.data
                })
        },
        queryCostDetail() {
            this.$axios.get("/api/order/queryCostDetail/" + this.orderId)
                .then(resp => {
                    console.log(resp.data)
                    this.costDetail = resp.data.data
                })
        }
    },
    computed: {
        orderStatusText() {
            const statusMap = {
                0: '待分配',
                1: '待调度',
                2: '运输中',
                3: '已签收',
                4: '已拒绝',
                5: '已取消'
            };
            return statusMap[this.basicDetail.orderStatus] || '未知状态';
        },
        orderSourceText() {
            const sourceMap = {
                0: '用户',
                1: '客户',
            };
            return sourceMap[this.basicDetail.orderSource] || '未知来源';
        },
        contractText() {
            const contractMap = {
                0: '用户合同',
                1: '客户合同',
            };
            return contractMap[this.basicDetail.contract] || '未知来源';
        },
        goodsTypeText() {
            const goodsTypeMap = {
                0: '日用品',
                1: '食品',
                2: '文件',
                3: '家具',
                4: '其他',
            };
            return goodsTypeMap[this.basicDetail.goodsType] || '未知来源';
        },
        totalGoodsCount() {
            return this.tableData.reduce((sum, item) => sum + parseFloat(item.goodsSmallCount), 0).toFixed(2);
        },
        totalGoodsVolume() {
            return this.tableData.reduce((sum, item) => sum + parseFloat(item.goodsVolume), 0).toFixed(2);
        },
        totalGoodsWeight() {
            return this.tableData.reduce((sum, item) => sum + parseFloat(item.goodsWeight), 0).toFixed(2);
        },
        billingMethodText() {
            const billingMethodMap = {
                0: '按重量计算',
                1: '按体积计算',
            };
            return billingMethodMap[this.costDetail.billingMethod] || '未知来源';
        },
        paymentMethodText() {
            const paymentMethodMap = {
                0: '寄付',
                1: '到付',
            };
            return paymentMethodMap[this.costDetail.paymentMethod] || '未知来源';
        },
    },
    created() {
        this.orderId = this.$route.query.orderId;
        this.queryBasicDetail();
        this.querySendDetail();
        this.queryDeliveryDetail();
        this.queryGoodsDetail();
        this.queryCostDetail();

    }
}
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}

.info-section {
    margin: 10px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-item {
    flex-basis: 23%;
    /* 每个项目占据行宽的近似四分之一 */
    margin: 0 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.info-item span {
    margin-left: 10px;
}

.total-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    font-weight: bold;
}

.total-info div {
    margin-left: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #13d941;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
</style>